<template>
	<el-dialog
    title="提示"
    :visible.sync="showAddNew"
    width="30%"
    :before-close="handleClose">
    <!--执行判断的样式-->
    <el-form :model="roleInfo" :rules="rules" ref="roleInfo">
        <!--表格-->
        <table>
            <tr>
                <td>角色名称</td>
                <td>
                    <el-form-item prop="roleName">
                        <el-input v-model="roleInfo.roleName"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td >角色描述</td>
                <td>
                    <el-form-item prop='roleDesc'>
                    	<el-input v-model='roleInfo.roleDesc'></el-input>
                    </el-form-item>
                </td>
            </tr>
            
            <tr>
                <td colspan="2">
					<el-row>
						<el-tree
							:data='allPermissions'
							show-checkbox
							node-key='permissionDesc'
							ref='tree'
							:props='defaultProps'
						/>
					</el-row>                	
                </td>
            </tr>
        </table>
    </el-form>
    
    <!--element里面的模板-->
    <span slot="footer" class="dialog-footer">
        <el-button @click="$parent.showAddNewRole = false">取 消</el-button>
        <el-button type="primary" @click="addNewOne">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
	export default{
//		props:['showAddNew'],
		data(){
			return {
				showAddNew:true,
				defaultProps:{
					children:'children',
					label:'label'
				},
				roleInfo:{roleName:'',roleDese:'',permission:[]},
				rules:{
					roleName:[
						{required:true,message:'请输入角色名称',trigger:'blur'},
						{min:3,max:20,message:'角色名长度在3到10个字符',trigger:'blur'},
					],
					roleDesc:[
						{required:true,message:'请输入角色描述',trigger:'blur'},
						{min:3,max:20,message:'角色描述长度在3到10个字符',trigger:'blur'},
					],
				}
			}
		},
		computed:{
			allPermissions(){
				return this.$store.getters.allPermissions;
			}
		},
		methods:{
			handleClose(){
				this.$parent.showAddNewRole = false;
			},
			addNewOne(){
				var permission = [];
				this.$refs.tree.getCheckedNodes().forEach((item)=>{
					permission.push(item.id)
				})
				this.roleInfo.permission = permission;
				this.$refs['roleInfo'].validate((valid)=>{
					if(valid){
						this.$http.post(this.$apis.insertRole,this.roleInfo)
						.then((res)=>{
							this.$message({
								message:res.data.message,
								type:res.data.success?'success':'danger'
							});
							this.handleClose();
							this.$store.dispatch('loadAllRoles',{api:this.$apis.allRoles});
						})
					}else{
						console.log('error submit!!');
						return false;
					}
				})
				
			}
		}
		
	}
</script>

<style>
	
</style>